<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="balance-box flexWarpColumn">
					<view class="balance">{{wallet}}</view>
					<view>可用余额</view>
				</view>
				<view class="store-box">
					<view class="flexWrapNo"><image src="../static/home/navigation-icon.png" class="navigation-icon"></image> {{shopName}}</view>
					<view class="note">{{note}}</view>
				</view>
				<view class="charge-box flexWrap">
					<view class="charge-item flexWarpColumn" @tap="changeMoney(index)" :class="{active:currmentIndex==index}" v-for="(item,index) in chargeList" :key='index'>
						<view>充{{item.amount_money}}送{{Number(item.give_money)}}</view>
						<view class="money">{{item.amount_money}}</view>
						<image src="../static/user/selected.png" class="select" v-if="currmentIndex==index"></image>
						<image src="../static/user/select.png" class="select" v-else></image>
					</view>
				</view>
				<view class="exeplan-box">
					预充值均属于特价商品，售出不退
				</view>
				<view class="exeplan-box" style="font-size: 28upx;">
					登录后无内容请下拉刷新
				</view>
				<view class="determine-btn" @tap="confirmRecharge()">确定充值{{chargeList[currmentIndex].amount_money||0}}元</view>
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage">
					<view class="tips-image">
						<image src="/static/public/success-icon.png"></image>
					</view>
					<view class="tips-name">充值成功</view>
					<view class="tips-text">充值金额：{{chargeList[currmentIndex].amount_money}}元</view>
					<view class="tips-btn" @tap="closeTips()">知道了</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				chargeList:[],
				currmentIndex:0,
				tipsFlage:false,
				wallet:0,
				note:"",
				shopName:""
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onLoad(ops) {
			this.shopName=uni.getStorageSync('shop_name')||""
			if(ops&&ops.store_id){
				uni.setStorageSync('store_id',ops.store_id)
			}
			if(!uni.getStorageSync('token')){
				uni.showModal({
					title: '未登录',
					content: '请先登录',
					success: function(res) {
						if(res.confirm){
							uni.navigateTo({
								url: "/pages/login"
							});
						}
					}
				});
			}else{
				this.getRechargeList()
				this.getUserInfo();
			}
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.getRechargeList();
			this.getUserInfo();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			changeMoney(index){
				this.currmentIndex=index
				this.note=this.chargeList[index].remarks
			},
			showTips(){
				this.tipsFlage=true
			},
			closeTips(){
				this.tipsFlage=false
			},
			// 充值列表
			getRechargeList(){
				this.$request.post(this.$api.rechargeList, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.chargeList=JSON.parse(JSON.stringify(data))
						console.log(this.chargeList)
						this.note=this.chargeList[0].remarks
					}
				})
			},
			// 确认充值
			confirmRecharge(){
				if(this.chargeList.length==0){
					this.$tools.showToast("商家暂未设置充值金额");
					return;
				}
				this.$jiuaiDebounce.canDoFunction({
					key: 'confirmRecharge', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.confirmRecharge, {
							store_id:uni.getStorageSync('store_id'),
							id:this.chargeList[this.currmentIndex].id
						}, {
							token:true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code==1) {
								this.appletPay(data)
							}
						})
					}
				})
			},
			appletPay(data) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: 'MD5',
					paySign: data.paySign,
					success(res) {
						console.log('success:' + JSON.stringify(res));
						that.$tools.showToast("支付成功");
						setTimeout(() => {
							that.getUserInfo()
							that.showTips()
						}, 1000)
					},
					fail(err) {
						console.log(err);
						that.$tools.showToast('支付取消')
					},
					complete(result) {
						
					}
				});
			},
			getUserInfo(){
				this.$request.post(this.$api.userInfo, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.wallet=data.wallet
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 36upx 28upx;
		padding-bottom: 300upx;
	}
	.balance-box{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color:#848688;
		.balance{
			line-height: 66upx;
			font-family:fantasy;
			font-weight: bold;
			font-size: 100rpx;
			color: #FFFFFF;
			margin-bottom: 30upx;
		}
	}
	.store-box{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #FFFFFF;
		margin-top: 40upx;
		.navigation-icon{
			width: 26upx;
			height: 34upx;
			margin-right: 12upx;
		}
		.note{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			line-height: 45upx;
			color:#848688;
			margin-top: 8upx;
		}
	}
	.charge-box{
		margin-top: 44upx;
		flex-wrap: wrap;
		.charge-item{
			width:276upx;
			height: 270upx;
			padding: 45upx 32upx;
			background: #232428;
			border-radius: 16upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 40upx;
			color: #909092;
			justify-content: space-between;
			margin-bottom: 28upx;
			position: relative;
			.money{
				font-weight: 300;
				font-size: 90rpx;
				text-stroke: 1px #FFFFFF;
				line-height: 66upx;
				font-family:fantasy;
				color: #FFFFFF;
			}
			.select{
				width: 72upx;
				height: 72upx;
				position: absolute;
				top: 28upx;
				right: 20upx;
			}
		}
		.active{
			color: #A4A8E8;
			background: linear-gradient( 180deg, #3D46C7 0%, #7781FD 100%);
		}
	}
	.exeplan-box{
		font-size:32upx;
		text-align: center;
		color:#FFF;
	}
	.determine-btn{
		width: 694rpx;
		height: 144rpx;
		line-height: 144rpx;
		background: linear-gradient( 90deg, #4AA22A 0%, #69D037 100%);
		border-radius: 72rpx;
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 64upx;
		margin: auto;
	}
	.tips-box{
		width: 660upx;
		height: 502upx;
		background:#232428;
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		.tips-image{
			width: 80upx;
			height: 80upx;
			margin-top: 62upx;
		}
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #FFFFFF;
			margin-top: 36upx;
		}
		.tips-text{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #FFFFFF;
			margin-top: 32upx;
		}
		.tips-btn{
			width: 286upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border: 2upx solid #26BCFD;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 52upx;
		}
	}
</style>
